<template>
  <div class="pagestyle">
    <list_controller ref="zujianname" :options="state.options" :noprintDownShow="true">
      <template v-slot:opraCurdBtnlist="row">
        <span>
          <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="editBtn(row.row.row)"
            >编辑
          </el-button>
          <el-button
            class="tableFontSize"
            type="primary"
            link
            size="small"
            @click="deleteBtn(row.row.row)"
            >删除
          </el-button>
        </span>
      </template>
      <template v-slot:opraCurdBtnAll>
        <span
          :class="state.addModal ? 'listInfoBtn active' : 'listInfoBtn'"
          @click="addBtn('mul')"
        >
          <svg-icon
            :class="state.addModal ? 'active' : ''"
            class-name="search-icon"
            icon-class="xinzeng"
          />
          新增
        </span>
        <span :class="'listInfoBtn'" @click="deleteBtn('mul')">
          <svg-icon class-name="search-icon" icon-class="shanchu" />
          删除
        </span>
      </template>
      <template v-slot:selectNamelist> 措施管理 </template>
      <template v-slot:listSS="{ row, field }">
        <span v-if="field == 'measureRank'">
          <svg-icon
            v-for="item in row.measureRank"
            class-name="search-icon"
            icon-class="zhongyao"
          />
          <span v-if="row.measureRank < 3">
            <svg-icon
              v-for="item in 3 - row.measureRank"
              class-name="search-icon"
              icon-class="pingfen"
            />
          </span>
        </span>
        <span v-if="field == 'preset'">
          <span v-if="row.preset">是</span>
          <span v-else>否</span>
        </span>
      </template>
    </list_controller>
    <!-- 新增弹框 -->
    <teleport to="body">
      <vxe-modal
        esc-closable
        destroy-on-close
        :lock-view="false"
        :width="660"
        :height="auto"
        v-model="state.addModal"
        resize
        :mask="true"
        showFooter
      >
        <template #title>
          <div class="w100 h100 fsc mask_title">{{ state.modalTitle }}</div>
        </template>
        <template #default>
          <div class="form_box">
            <el-form
              ref="formRef"
              :model="state.formData"
              :rules="state.rules"
              label-position="top"
            >
              <el-row :gutter="20">
                <el-col :span="8">
                  <el-form-item label="报警类型" prop="alarmTypeId">
                    <el-select
                      clearable
                      filterable
                      v-model="state.formData.alarmTypeId"
                      placeholder="请选择"
                      @change="stationModelChange"
                    >
                      <el-option
                        v-for="item in state.stationmodelList"
                        :key="item.id"
                        :label="item.alarmType"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="措施内容" prop="measureContent">
                    <el-input
                      v-model="state.formData.measureContent"
                      placeholder="请输入"
                    ></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="措施等级" prop="measureRank">
                    <el-select
                      clearable
                      filterable
                      v-model="state.formData.measureRank"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in state.stationInNumList"
                        :key="item.code"
                        :label="item.label"
                        :value="item.code"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否默认" prop="preset">
                    <el-select
                      clearable
                      filterable
                      v-model="state.formData.preset"
                      placeholder="请选择"
                    >
                      <el-option
                        v-for="item in state.presetList"
                        :key="item.code"
                        :label="item.label"
                        :value="item.code"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
        </template>
        <template #footer>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submitForm"> 确定 </el-button>
        </template>
      </vxe-modal>
    </teleport>
  </div>
</template>
<script setup>
import list_controller from "@/components/commonCom/list_controller";
import { computed, onMounted, reactive } from "vue";
 import {
    ElMessage,
    ElMessageBox
  } from 'element-plus'
import { table_headers } from "@/components/commonCom/table_headers";
import axios from "@/utils/request";
import usePagesStore from "@/store/modules/pages";
import { getlistAlarmTypesList } from "@/api/config";
const { proxy } = getCurrentInstance();
const store = usePagesStore();
const router = useRouter();
let previewHttps = import.meta.env.VITE_APP_HTTP;
components: {
  list_controller;
}
const upload = ref(null);
let state = reactive({
  options: {
    tableheads: computed(() => table_headers.configMeasure),
    listSS: [{ field: "preset" }, { field: "measureRank" }],
    queryList: {
      dropdownUrl: "",
      querys: [
        {
          field: "alarmTypeId",
          title: "报警类型",
          type: "select",
          binddata: "",
          options: [],
        },
      ],
    },
    dataUrl: "/measure/search",
    delUrl: "/measure/delete",
    addUrl: "/measure/add",
    descUrl: "/measure/search",
    editUrl: "/measure/update",
  },
  // 表单
  addModal: false,
  modalTitle: "新增措施管理",
  drawerShow: false,
  formRef: null,
  formData: {},
  rules: {
    measureContent: [
      {
        required: true,
        message: "请输入措施内容",
        trigger: "blur",
      },
    ],
    alarmTypeId: [
      {
        required: true,
        message: "请输入报警内容",
        trigger: "change",
      },
    ],
    measureRank: [
      {
        required: true,
        message: "请选择措施等级",
        trigger: "change",
      },
    ],
    preset: [
      {
        required: true,
        message: "请选择是否默认",
        trigger: "change",
      },
    ],
  },
  editId: undefined,
  stationInNumList: [
    {
      code: 1,
      label: "一般",
    },
    {
      code: 2,
      label: "重要",
    },
    {
      code: 3,
      label: "非常重要",
    },
  ],
  presetList: [
    {
      code: true,
      label: "是",
    },
    {
      code: false,
      label: "否",
    },
  ],
});
// 新增按钮
function addBtn(row) {
  state.modalTitle = "新增措施管理";
  state.addModal = true;
  state.formData = {};
  state.editId = undefined;
  state.fileList = [];
}
// 编辑按钮
function editBtn(row) {
  state.modalTitle = "编辑措施管理";
  state.addModal = true;
  axios
    .post(state.options.descUrl, {
      id: row.id,
    })
    .then((res) => {
      if (res.code == 200) {
        state.formData = res.data.list[0];
        state.editId = res.data.list[0].id;
      }
    });
}

function deleteBtn(row) {
  let ids = [];
  if (row != "mul") {
    ids = [row.id];
  } else {
    if (store.records.length > 0) {
      ids = store.records.map((item) => {
        return item.id;
      });
    } else {
      proxy.$modal.msgSuccess("请先勾选所要删除数据!");
    }
  }
  if (ids.length > 0) {
      ElMessageBox.confirm(
          '确定要删除该数据吗?',
          '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
        )
        .then(() => {
          axios.post(state.options.delUrl, ids).then(res => {
            if (res.code == 200) {
              proxy.$refs['zujianname'].getData()
              state.addModal = false
              ElMessage({
                type: 'success',
                message: res.msg,
              })
              store.records = []
            }
          })

        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '删除取消',
          })
        })
    }
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      if (state.editId) {
        state.formData.id = state.editId;
        axios.post(state.options.editUrl, state.formData).then((res) => {
          if (res.code == 200) {
            proxy.$refs["zujianname"].getData();
            state.addModal = false;
            proxy.$modal.msgSuccess(res.msg);
          }
        });
      } else {
        axios.post(state.options.addUrl, state.formData).then((res) => {
          if (res.code == 200) {
            proxy.$refs["zujianname"].getData();
            state.addModal = false;
            proxy.$modal.msgSuccess(res.msg);
          }
        });
      }
    }
  });
}

function cancel() {
  state.addModal = false;
}

function getlistAlarmTypesData() {
  let arr = [];
  getlistAlarmTypesList().then((res) => {
    state.stationmodelList = res.data;
    state.stationmodelList.forEach((item) => {
      arr.push({
        value: item.id,
        label: item.alarmType,
      });
      state.options.queryList.querys[0].options = arr;
    });
  });
}
getlistAlarmTypesData();
</script>
<style lang="scss" scoped>
::v-deep .el-drawer {
  .querycss {
    .fsc {
      &:nth-child(2) {
        display: none;
      }
    }
  }

  .table_box {
    .fsc {
      display: none;
    }
  }
}
</style>
